<template>

  <div class="middle-box text-center loginscreen   animated fadeInDown">
    <div>
      <div>
        <h1 class="logo-name">FILE</h1>
      </div>
      <h3>注册</h3>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="用户名" v-model="userName">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="密码" v-model="password">
        </div>
        <div class="form-group">
          <input type="email" class="form-control" placeholder="邮箱" v-model="email">
        </div>
        <div class="form-group">
          <input type="phone" class="form-control" placeholder="电话号码" v-model="phone">
        </div>
        <div class="form-group">
          <label>密保问题</label>
          <select class="form-control" v-model="question">
            <option v-for="(item, index) in questionList" :value="item.id">{{item.question}}</option>
          </select>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="答案" v-model="answer">
        </div>
        <button type="button" class="btn btn-primary block full-width m-b" v-on:click="register">注册</button>
        <p class="text-muted text-center"><small>已经注册账户?</small></p>
        <router-link class="btn btn-sm btn-white btn-block" to="/login">登录</router-link>
    </div>
  </div>

</template>

<script>

import server from '@/server/server.js'

export default {
  name: 'Register',
  data () {
    return {
      userName: '',
      email: '',
      phone: '',
      password: '',
      question: '',
      answer: '',
      questionList: []
    }
  },
  created () {
    const vue = this
    // 获取问题列表    
    server.get(server.getQuestionListUrl, null, "", true, false, this, function(data) {
      vue.questionList = data
      vue.question = vue.questionList[0].id
    })
  },
  mounted () {
  },
  methods: {
    register: function() {
      const vue = this

      const params = {
        username: vue.userName,
        email: vue.email,
        phone: vue.phone,
        password: vue.password,
        question: vue.question,
        answer: vue.answer
      }

      for(var key in params) {
        if (!params[key]) {
          vue.$toastr('warning', '参数异常', 'warning')
          return false
        }
      }

      /* 注册 */
      server.post(server.postRegisterUrl, null, params, true, false, this, function(data) {
          vue.$toastr('success', '正在跳转登陆页面，请登录', '注册成功')
          // 跳转登录页面
          vue.$router.push({ name: 'login'})
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
